<template>
  <view class="recharge-page">
    <!-- 顶部选项卡 -->
    <view class="tabs">
      <view 
        v-for="(tab, index) in tabs" 
        :key="index"
        :class="['tab-item', currentTab === index ? 'active' : '']"
        @click="switchTab(index)"
      >
        {{tab}}
      </view>
    </view>
    
    <!-- 选项卡内容 -->
    <swiper style="overflow: scroll;"
      class="swiper" 
      :current="currentTab" 
      @change="swiperChange"
      :duration="300"
    >
      <!-- 充值选项卡 -->
      <swiper-item>
        <view class="tab-content">
          <div style="margin-bottom: 20rpx;">当前刷新点：{{point}}   <text @click="use_point" class="point_btn">立即使用</text> </div>
          <!-- 充值选项 -->
          <view class="amount-list">
            <view 
              v-for="(item, index) in rechargeOptions" 
              :key="index"
              :class="['amount-item', selectedRecharge === index ? 'active' : '']"
              @click="selectRecharge(index)"
            >
              <view class="amount">{{item.amount}}元</view>
              <view class="gift" v-if="item.gift">{{item.gift}} 点</view>
            </view>
          </view>
          
          <!-- <view class="custom-amount">
            <view class="label">自定义刷新点</view>
            <input 
              type="number" 
              v-model="customAmount" 
              placeholder="请输入充值数量" 
              class="input"
              @focus="selectCustom"
            />
          </view> -->
          
          <!-- 充值按钮 -->
          <button class="recharge-btn" @click="handleRecharge">立即充值</button>
		  
		  
		  <view v-for="(it,ind) in message" style="margin-top: 40rpx;line-height: 30rpx;width: 96%;margin-left: 2%;">{{it}}</view>
		  
		  
		  
        </view>
      </swiper-item>
      
      
      <!-- 记录选项卡 -->
      <swiper-item>
        <view class="tab-content">
          <view class="record-title">充值记录</view>
          
          <view class="record-list">
            <view 
              v-for="(item, index) in rechargeRecords" 
              :key="index"
              class="record-item"
            >
              <view class="record-left">
                <view class="record-type">{{item.memo}}</view>
                <view class="record-time">{{item.create_at}}</view>
              </view>
              <view :class="['record-amount', item.point > 0 ? 'income' : 'expense']">
                {{item.point > 0 ? '+' : ''}}{{item.point}}点
              </view>
            </view>
            
            <view v-if="rechargeRecords.length === 0" class="no-data">
              暂无充值记录
            </view>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import {
	RefreshPoint,ChargePoint,UsePoint
} from "@/utils/API.js";
export default {
  data() {
    return {
      tabs: ['充值', '记录'],
      currentTab: 0,
      point:0,
	  message:[],
	  
      // 充值数据
      rechargeOptions: [],
      selectedRecharge: null,
      customAmount: '',
      
      // 记录数据
      rechargeRecords: [
        
      ]
    }
  },
  onLoad() {
	var that = this
  	RefreshPoint().then(res => {
  		that.rechargeOptions = res.data.list
		that.point = res.data.point
		that.message = res.data.message
		that.rechargeRecords = res.data.record
  	})
  },
  methods: {
	use_point(){
		var that = this
		uni.showModal({
			title: '操作确认', // 标题文字，支持字符串或空值
			content: '确定执行此操作吗？', // 正文内容，支持换行符\r\n
			showCancel: true, // 是否显示取消按钮（默认true）
			cancelText: '取消', // 取消按钮文字（默认"取消"）
			cancelColor: '#999', // 取消按钮文字颜色（默认#000）
			confirmText: '确定', // 确认按钮文字（默认"确定"）
			confirmColor: '#007AFF', // 确认按钮颜色（默认#3CC51F）
			success: result => {
				if (result.confirm) {
					if(Number(this.point)<=0){
						uni.showModal({
							content:'您的刷新点不足，请您充值后再使用哦！'
						})
					}else{
						UsePoint().then(res => {
							var rank = res.data.rank
							var food_rank = res.data.food_rank
							
							uni.showModal({
								content: '使用成功！\n当前区域排名第'+rank+'名\n 菜系排名第'+food_rank+'名',
								showCancel: false, // 是否显示取消按钮，默认为 true
							})
							
							RefreshPoint().then(res => {
								that.point = res.data.point
								that.rechargeRecords = res.data.record
							})
						})
					}
				}
			}
		})
	},
	  
    // 切换选项卡
    switchTab(index) {
      this.currentTab = index
    },
    
    // swiper滑动事件
    swiperChange(e) {
      this.currentTab = e.detail.current
    },
    
    // 选择充值金额
    selectRecharge(index) {
      this.selectedRecharge = index
      this.customAmount = ''
    },
    
    // 选择自定义金额
    selectCustom() {
      this.selectedRecharge = null
    },
    
    // 处理充值
    handleRecharge() {
      let amount = 0
      let that = this
      if (this.selectedRecharge !== null) {
        amount = this.rechargeOptions[this.selectedRecharge].amount
      } else if (this.customAmount) {
        amount = parseFloat(this.customAmount)
      } else {
        uni.showToast({
          title: '请选择您想要充值的选项',
          icon: 'none'
        })
        return
      }
      
      uni.showLoading({
        title: '充值中...'
      })
      
      // 这里应该是调用充值API
      uni.hideLoading()
		
		ChargePoint({amount:amount}).then(res => {
			console.log(res)
			wx.requestPayment({
				timeStamp: res.data.timeStamp,
				nonceStr: res.data.nonceStr,
				package: res.data.package,
				signType: res.data.signType,
				paySign: res.data.paySign,
				success(res) {
					uni.showToast({
						title: '支付成功',
						icon: 'none',
						duration: 2000,
						success() {
							// 重置选择
							that.selectedRecharge = null
							that.customAmount = ''
							
							
							RefreshPoint().then(re => {
								that.point = re.data.point
								that.rechargeRecords = re.data.record
							})
							
							
						}
					})
				},fail(e) {
					uni.showToast({
						title: '支付失败',
						icon: 'none',
						duration: 2000,
						success() {
							
						}
					})
				}
			})
			
			
		})

    },
    
    
  }
}
</script>

<style lang="scss" scoped>
.point_btn{
	background: #84BD00;
	color: white;
	border-radius: 10rpx;
	font-size: 22rpx;
	margin-left: 20rpx;
	padding: 7rpx 15rpx;
}
.recharge-page {
  padding: 20rpx;
  height: 100vh;
  background-color: #f5f5f5;
}

/* 选项卡样式 */
.tabs {
  display: flex;
  background-color: #fff;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  
  .tab-item {
    flex: 1;
    text-align: center;
    padding: 20rpx 0;
    font-size: 28rpx;
    color: #666;
    position: relative;
    
    &.active {
      color: #84BD00;
      font-weight: bold;
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60rpx;
        height: 4rpx;
        background-color: #84BD00;
        border-radius: 2rpx;
      }
    }
  }
}

.swiper {
  height: calc(100vh - 120rpx);
}

.tab-content {
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  height: 100%;
  overflow-y: scroll;
}

/* 充值选项卡样式 */
.recharge-title, .gift-title, .record-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  color: #333;
}

.amount-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 30rpx;
  
  .amount-item {
    width: 48%;
    padding: 30rpx 0;
    margin-bottom: 20rpx;
    text-align: center;
    border: 1rpx solid #ddd;
    border-radius: 10rpx;
    background-color: #fff;
    
    &.active {
      border-color: #84BD00;
      background-color: #e6f2ff;
      
      .amount {
        color: #84BD00;
      }
    }
    
    .amount {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .gift {
      font-size: 24rpx;
      color: #ff6b6b;
      margin-top: 10rpx;
    }
  }
}

.custom-amount {
  margin-bottom: 40rpx;
  
  .label {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 15rpx;
  }
  
  .input {
    border: 1rpx solid #ddd;
    border-radius: 8rpx;
    padding: 20rpx;
    font-size: 28rpx;
  }
}

/* 赠送选项卡样式 */
.gift-list {
  .gift-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25rpx;
    margin-bottom: 20rpx;
    background-color: #fff;
    border-radius: 10rpx;
    border: 1rpx solid #eee;
    
    &.active {
      border-color: #84BD00;
      background-color: #e6f2ff;
    }
    
    .gift-info {
      .gift-name {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 10rpx;
      }
      
      .gift-desc {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    .gift-amount {
      font-size: 32rpx;
      font-weight: bold;
      color: #ff6b6b;
    }
  }
}

/* 记录选项卡样式 */
.record-list {
  .record-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25rpx 0;
    border-bottom: 1rpx solid #eee;
    
    .record-left {
      .record-type {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 10rpx;
      }
      
      .record-time {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    .record-amount {
      font-size: 30rpx;
      font-weight: bold;
      
      &.income {
        color: #ff6b6b;
      }
      
      &.expense {
        color: #666;
      }
    }
  }
  
  .no-data {
    text-align: center;
    padding: 100rpx 0;
    color: #999;
    font-size: 28rpx;
  }
}

/* 充值按钮 */
.recharge-btn {
  margin-top: 50rpx;
  background-color: #84BD00;
  color: #fff;
  border-radius: 50rpx;
  font-size: 30rpx;
  
  &:active {
    opacity: 0.8;
  }
}
</style>